<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>双向绑定 - 监听器</title>
	<!-- <script src="https://unpkg.com/vue@next"></script> -->
	<script src="js/vue.global.js"></script>
	<link rel="stylesheet" href="css/com.css">
</head>
<body>
	
<div id="app" class="">
	<p>
		用户名：<input type="text" v-model="username" placeholder="用户名不少于6个字符">
		{{msg}}
	</p>
	<p>你输入的内容是：{{username}}</p>
	<p>
		请选择：
		<select name="" v-model="level">
			<option value="1">vip1</option>
			<option value="2">vip2</option>
			<option value="3">vip3</option>
		</select>
	</p>
	<p>你选择了：{{level}}</p>
</div>

</body>
<script>
const HelloVueApp = {
	data() {
		return {
			username: '',
			level:'2',
			userList:['admin', 'peter', 'zhu'],
			msg:'侦听中...',
		}
	},
	//监听属性，监听器
	watch:{
		//监听回调函数的参数：当前的值/已更新的值，第2个参数可选，是原来的值
		username: function(newValue){
			var THIS = this;
			var has = false;
			this.userList.forEach(function(value){
				if(newValue == value){
					// alert('该用户已经存在');
					THIS.msg = '该用户已经存在';
					has = true;
					console.log('has');
				}else{
					if(!has){
						THIS.msg = '侦听中...2';
					}
				}
			})
		},
		level:function(newValue){
			switch(parseInt(newValue)){
				case 1:
					alert('前端');
					break;
				case 2:
					alert('后端');
					break;
				case 3:
					alert('运维');
					break;
			}
		}
	}
}
var vm = Vue.createApp(HelloVueApp).mount('#app');

</script>

</html>